<template>
  <scroll-view
    class="container"
    scroll-y
    :show-scrollbar="false"
    enhanced
    :scroll-top="scrollTop"
    scroll-with-animation
    @scroll="handleScroll"
  >
    <swiper
      indicator-dots
      indicator-color="#fff"
      indicator-active-color="#00cc99"
      autoplay
      circular
    >
      <swiper-item v-for="banner in bannerList" :key="banner.id">
        <navigator :url="banner.linkUrl">
          <image class="banner-img" :src="banner.imageUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <view class="category">
      <view
        class="category-item"
        v-for="(cate, index) in hotCateList"
        :key="index"
      >
        <img :src="cate.src" :alt="cate.name" class="cate-img" />
        <span class="cate-name">{{ cate.name }}</span>
      </view>
    </view>

    <CardList title="热门课程" extra="全部课程">
      <navigator
        v-for="course in courseList"
        :key="course.id"
        class="card"
        :url="`/pages/course/detail/index?id=${course.id}`"
      >
        <img :src="course.cover" :alt="course.title" class="course-img" />
        <div class="course-title els">{{ course.title }}</div>
        <div class="course-wrap">
          <uni-icons type="fire" size="20" color="red"></uni-icons>
          <span class="course-view">{{ course.viewCount }} 已学习</span>
        </div>
        <div>
          <span class="course-price">￥{{ course.price }}</span>
          <span>{{ course.buyCount }}人购买</span>
        </div>
      </navigator>
    </CardList>

    <CardList title="名师大咖" extra="全部名师">
      <div v-for="teacher in teacherList" :key="teacher.id" class="card">
        <img :src="teacher.avatar" :alt="teacher.name" class="teacher-img" />
        <div class="teacher-intro">{{ teacher.intro }}</div>
        <div class="teacher-name">{{ teacher.name }}</div>
      </div>
    </CardList>
  </scroll-view>

  <BackToTop @setScrollTop="setScrollTop" v-if="oldScrollTop >= 600" />
</template>

<script lang="ts" setup>
import { ref, nextTick } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getBannerListApi, getCourseAndTeacherListApi } from "../../api/home";
import type { IBannerList, ICourseList, ITeacherList } from "../../api/types";
import CardList from "../../components/card-list/index.vue";
import BackToTop from "../../components/back-to-top/index.vue";

// 轮播图
const bannerList = ref<IBannerList>([]);

onShow(async () => {
  const res = await getBannerListApi();
  bannerList.value = res.bannerList;
});

// 分类
const hotCateList = [
  {
    src: "https://p.qpic.cn/qqconadmin/0/f310ebac024349818a459aa1f5413042/0",
    name: "后台开发",
  },
  {
    src: "https://p.qpic.cn/qqconadmin/0/38e56d79465841839852e652661d507a/0",
    name: "前端开发",
  },
  {
    src: "https://p.qpic.cn/qqconadmin/0/c5f85eeb180149f7b2f1a1e6894f8df9/0",
    name: "云计算",
  },
  {
    src: "	https://p.qpic.cn/qqconadmin/0/e7c8a2649635424ab82faad7fa9b2c3a/0",
    name: "大数据",
  },
  {
    src: "https://p.qpic.cn/qqconadmin/0/9b248c95c0c44301b4155d9ac173c9a1/0",
    name: "全部分类",
  },
];

// 课程和教师数据
const courseList = ref<ICourseList>([]);
const teacherList = ref<ITeacherList>([]);

onShow(async () => {
  const res = await getCourseAndTeacherListApi();
  teacherList.value = res.teacherList;
  courseList.value = res.courseList;
});

// 回到顶部
const scrollTop = ref(0);
const oldScrollTop = ref(0);

interface ScrollEvent {
  detail: {
    scrollTop: number;
  };
}
const handleScroll = (e: ScrollEvent) => {
  oldScrollTop.value = e.detail.scrollTop;
};

const setScrollTop = async (val: number) => {
  scrollTop.value = oldScrollTop.value;
  /*
    等用户界面更新完成，在触发
      如果是：await nextTick(); ，更新完成会将promise改为成功状态
      如果是：nextTick(() => { xxx }); ，更新完成会触发回调函数
  */
  await nextTick();
  scrollTop.value = val;
};
</script>

<style scoped lang="scss">
// npm i sass -D
.banner-img {
  width: 100%;
}

.category {
  display: flex;
}

.category-item {
  width: 20%;
  height: 150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.cate-img {
  width: 70rpx;
  height: 70rpx;
}

.cate-name {
  font-size: 12px;
  color: #666;
}

.card {
  width: 345rpx;
  background-color: #eee;
  font-size: 14px;
}

.course-img {
  width: 100%;
  height: 200rpx;
}

.course-title {
  font-weight: 700;
}

.course-wrap {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}

.course-view {
  font-size: 13px;
  margin-left: 20rpx;
  margin-bottom: 5rpx;
}

.course-price {
  color: red;
  font-weight: 700;
  margin-right: 10rpx;
}

.teacher-img {
  width: 100%;
  height: 400rpx;
}

.teacher-intro {
  font-weight: 700;
  height: 75rpx;
  @include multiEls(2);
}

.teacher-name {
  color: $primary-color;
}
</style>
